    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>京东渐渐消失的广告栏</title>
    </head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .navga{
            height: 40px;
            background-color: #0A7EC3;
        }
        .top-banner{
            background-color: blue;
            opacity: 1;
        }
        .w{
            width: 1210px;
            height: 50px;
            margin: 0 auto;
            background-color: #990099;
            position: relative;
        }
        a{
            position: absolute;
            top: 0;
            right: 5px;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            color: black;
        }
        .footer{
            height: 100px;
            background-color: #7AB800;
        }

    </style>
    <body>
        <div class="navga"></div>
            <div class="top-banner" style="opacity: 1">
                <div class="w">
                    <a href="#">×</a>//不要忘记#，不然会跳转到其他页面
                </div>
            </div>
        <div class="footer"></div>
        <script>
            var aRR=document.getElementsByTagName("a")[0];
            var topBanner=document.getElementsByClassName("top-banner")[0];
            var timer=null;

//            aRR.onclick=function () {
//                console.log(aRR);
//            }

            aRR.onclick=function () {
              console.log(aRR);
                timer=setInterval(function () {
                    topBanner.style.opacity=topBanner.style.opacity-0.1;
                },200);
                if (topBanner.style.opacity===0){
                    topBanner.style.opacity="none";
                   clearInterval(0);
                }
            }
        </script>
    </body>
    </html>